<template>
    <div>
        <el-table
                class="table"
                :data="menuData"
                style="margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :header-cell-style="{'color':'black'}"
                :row-style="{'color':'black'}"
                :header-row-style="{'color':'black'}"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="名字">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="url">
            </el-table-column>
            <el-table-column
                    prop="path"
                    label="path">
            </el-table-column>
            <el-table-column
                    prop="iconCls"
                    label="图标">
            </el-table-column>
            <el-table-column
                    prop="component"
                    label="组件">
            </el-table-column>
            <el-table-column label="是否启用">
                <template slot-scope="scope">
                    <el-switch
                            style="display: block"
                            v-model="scope.row.enabled"
                            @change="updEnabled(scope.$index,scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            @click="openAdd(scope.$index, scope.row)">添加
                    </el-button>
                    <el-button
                            @click="openUpd(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            type="danger"
                            @click="delMenu(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" class="demo-ruleForm">
            <el-form :model="copyMenuData" :label-width="formLabelWidth" label-position="right">
                <el-form-item label="菜单名称：">
                    <el-input v-model="copyMenuData.name"></el-input>
                </el-form-item>
                <el-form-item label="url：">
                    <el-input v-model="copyMenuData.url"></el-input>
                </el-form-item>
                <el-form-item label="path：">
                    <el-input v-model="copyMenuData.path"></el-input>
                </el-form-item>
                <el-form-item label="图标：">
                    <el-input v-model="copyMenuData.iconCls"></el-input>
                </el-form-item>
                <el-form-item label="组件：">
                    <el-input v-model="copyMenuData.component"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updMenu()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="收货地址" :visible.sync="addDialogFormVisible" class="demo-ruleForm" width="800px">
            <el-form :model="addMenuData" :label-width="formLabelWidth" label-position="right" inline="inline">
                <el-form-item label="父菜单：">
                    <el-input v-model="addMenuData.parentName"
                              :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="菜单名称：">
                    <el-input v-model="addMenuData.name"></el-input>
                </el-form-item>
                <el-form-item label="url：">
                    <el-input v-model="addMenuData.url"></el-input>
                </el-form-item>
                <el-form-item label="path：">
                    <el-input v-model="addMenuData.path"></el-input>
                </el-form-item>
                <el-form-item label="图标：">
                    <el-input v-model="addMenuData.iconCls"></el-input>
                </el-form-item>
                <el-form-item label="组件：">
                    <el-input v-model="addMenuData.component"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-col :span="8">
                        <el-form-item label="是否激活" prop="delivery">
                            <el-switch
                                    v-model="addMenuData.keepAlive"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">>
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否要求权限" prop="delivery">
                            <el-switch
                                    v-model="addMenuData.requireAuth"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">>
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否启用" prop="delivery">
                            <el-switch
                                    v-model="addMenuData.enabled"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">>
                            </el-switch>
                        </el-form-item>
                    </el-col>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMenu()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MenuMana",
        data() {
            return {
                menuData: [{
                    name:"",
                    url:"",
                    path:"",
                    iconCls:"",
                    component:"",
                    enabled:true,
                    keepAlive: true,
                    requireAuth: true,
                }],
                addMenuData: {
                    parentName: "",
                    keepAlive: true,
                    enabled: true,
                    requireAuth: true
                },
                copyMenuData: {
                    name: "",
                    parentName: "",
                    keepAlive: true,
                    enabled: true,
                    requireAuth: true
                },
                dialogFormVisible: false,
                addDialogFormVisible: false,
                loginServiceApi: "",
                formLabelWidth: '120px',
            }
        },
        watch: {},
        mounted() {
            this.loginServiceApi = this.$store.state.loginServiceApi;
            this.fnInitMenus()
        },
        methods: {
            /**
             * 初始化菜单信息
             */
            fnInitMenus() {
                this.getRequest(this.loginServiceApi + '/system/menu/menus').then(res => {
                        this.menuData = res.data
                })
            },
            /**
             * 打开修改菜单
             * */
            openUpd(index, menu) {
                this.dialogFormVisible = true;
                this.copyMenuData = JSON.parse(JSON.stringify(menu));
            },
            /**
             * 修改菜单
             * */
            updMenu() {
                this.putRequest(this.loginServiceApi + "/system/menu/updMenu", this.copyMenuData).then(res => {
                    if (res.code == 200) {
                        this.copyMenuData = {};
                        this.dialogFormVisible = false;
                        this.fnInitMenus()
                    }
                })
            },
            /**
             * 打开增加菜单的弹框
             * */
            openAdd(index, menu) {
                this.addDialogFormVisible = true;
                this.addMenuData.parentName = JSON.parse(JSON.stringify(menu.name));
                this.addMenuData.parentId = JSON.parse(JSON.stringify(menu.id));
            },
            /**
             * 新增菜单
             * */
            addMenu() {
                this.postRequest(this.loginServiceApi + "/system/menu/insertMenu", this.addMenuData).then(res => {
                    if (res.code == 200) {
                        this.addDialogFormVisible = false;
                        this.fnInitMenus();
                    }
                })
            },
            /**
             * 删除菜单
             */
            delMenu(index, data) {
                if (data.isParent) {
                    this.$message.error('父部门删除失败！')
                } else {
                    var hasChildren = '';
                    if (data.children.length > 0) hasChildren = "并将会删除子菜单！";
                    this.$confirm('此操作将永久删除[' + data.name + ']菜单,' + hasChildren + ' 是否继续？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.deleteRequest(this.loginServiceApi + '/system/menu/delMenuById?id=' + data.id).then(res => {
                            if (res.code == 200) {
                                this.fnInitMenus();
                            }
                        })
                    }).catch(() => {
                        this.$message.info('已取消删除！')
                    })
                }
            },
            /**
             * 修改菜单状态
             * */
            updEnabled(index, menu) {
                this.getRequest(this.loginServiceApi + "/system/menu/updMenuEnambled?menuId=" + menu.id + "&enabled=" + menu.enabled).then(ref => {

                })
            }

        }
    }
</script>

<style scoped>
    .el-table {
        color: black;
    }

    .el-table--mini, .el-table--small, .el-table__expand-icon {
        font-size: 14px;
    }

    .el-table--border {
        border-radius: 20px;
    }

    .el-table th, .el-table tr {
        background-color: #fff0;
    }

    .el-table, .el-table__expanded-cell {
        background-color: #ffffffa6;
    }
</style>
